<template>
  <div
    class="center"
    ref="homePage"
  >
    <!-- :style="`height:${WinHeight}px`" -->
    <div @click="cen_user_click">
      <img
        :src="user.cover"
        class="userimg"
        alt=""
      >
      <div class="username">
        <div class="name">{{user.nick_name}}</div>
      </div>
      <img
        src="https://o6wndwjxn.qnssl.com/%E4%B8%AA%E4%BA%BA%E4%B8%AD%E5%BF%83-%E5%88%97%E8%A1%A8%E5%B0%8F%E7%AE%AD%E5%A4%B4@3x.png"
        class="center_jaintou"
        alt=""
      >
    </div>
    <!-- <div class="pc_top2_kaung">
        <div
          class="pc_top2"
          @click="goOther('teacher_follow')"
        >
          <div class="pc_top2_num">{{user.follow_number}}</div>
          <div class="pc_top2_wz">关注教师</div>
        </div>
        <div class="pc_top2_xian"></div>
        <div
          class="pc_top2"
          @click="goOther('co_Collection')"
        >
          <div class="pc_top2_num">{{user.sc}}</div>
          <div class="pc_top2_wz">课程收藏</div>
        </div>
        <div class="pc_top2_xian"></div>
        <div
          class="pc_top2"
          @click="goOther('footprint')"
        >
          <div class="pc_top2_num">{{user.acs}}</div>
          <div class="pc_top2_wz">我的足迹</div>
        </div>
      </div> -->
    <div
      class="zhongjian"
      @click="navpromot"
    >
      <div class="tgzx">
        <img
          src="http://o6wndwjxn.qnssl.com/e1512201901030938155972.png"
          class="tgzx_img"
          alt=""
        >
        <span>推广中心</span>
      </div>
      <div class="xxzq">
        学习赚钱两不误!
        <img
          class="jiantouhuaang"
          src="https://o6wndwjxn.qnssl.com/%E6%8E%A8%E5%B9%BF%E4%B8%AD%E5%BF%83-%E7%AE%AD%E5%A4%B4@2x.png"
        >
      </div>
      <!-- <div class="zhongjainxian"></div> -->
      <!-- <div class="right"
           @click="goVip">
        <div class="tgzx">
          <img src="https://o6wndwjxn.qnssl.com/huiyuanka.svg"
               class="tgzx_img"
               alt="">
          <span>会员卡</span>
        </div>
        <dir class="zhongjian_hengxian"></dir>
        <div class="xxzq">专属特权享不停!</div>
      </div> -->
    </div>
    <div class="nr">
      <div class="list">
        <div
          v-for="(item,index) in lieArr"
          :key='index'
          class="kuanggrzx"
          @click="goOther(item.path)"
        >
          <img
            :src="item.img"
            alt=""
            class="kuanggrzx_img"
          >
          <div class="kuanggrzx_wzs">{{item.name}}</div>
        </div>
      </div>
    </div>
    <div
      class="cwjs"
      @click="goOther('teacherlook')"
    >
      <span
        class="cwjs-wz"
        v-if="hahaha === true"
      >教师讲堂</span>
      <span
        class="cwjs-wz"
        v-if="hahaha === false"
      >成为讲师</span>
    </div>
    <div class="nr nr-two">
      <div
        v-for="(item,index) in lieArrThree"
        :key='index'
        class="kuanggrzx-two"
        @click="goOther(item.path)"
      >
        <img
          :src="item.img"
          alt=""
          class="kuanggrzx_img-two"
        >
        <div class="kuanggrzx_wz">{{item.name}}<span v-if="arrdom.length >0 && item.path === 'pintuanlist'" class="quan"></span></div>
        <img
          src="http://o6wndwjxn.qnssl.com/66d10201903251718153967.png"
          alt=""
          class="kuanggrzx_img-twor"
          style="float:right"
        >
      </div>
    </div>
    <bottomtab></bottomtab>
    <confirm
      v-model="shows"
      :show-cancel-button="false"
      @on-confirm="onConfirm"
    >
      <img
        style="width:80%"
        src="https://o6wndwjxn.qnssl.com/%E4%BA%8C%E7%BB%B4%E7%A0%81.png"
      >
      <div style="
margin-top:20px;
font-family: PingFangSC-Regular;
font-size: 16px;
color: #333333;">推广秘书</div>
<p style="font-family: PingFangSC-Regular;
font-size: 12px;
color: #999999;
text-align: center;
margin-top:8px;
">
扫描微信二维码添加知运客服了解更多
</p>
<p style="font-family: PingFangSC-Regular;
font-size: 12px;
color: #999999;
text-align: center;
margin-top:8px;
">
(长按保存到相册)
</p>
    </confirm>
  </div>
</template>

<script>
import bottomtab from '@/components/public/tab'
import { spellgroup } from '@/api/center'
import { part } from '@/api/assemble'
import {
  mapState
} from 'vuex'
import {
  user_list
} from '@/api/center'
import {
  Confirm,
  Cell,
  CellBox,
  CellFormPreview,
  Group,
  Badge
} from 'vux'

export default {
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id
    })
  },
  components: {
    Confirm,
    Group,
    Cell,
    CellFormPreview,
    CellBox,
    Badge,
    bottomtab
  },
  data () {
    return {
      arrdom: [],
      hahaha: '',
      shows: false,
      WinHeight: '',
      loading: true,
      clientHeight: '',
      user: {},
      lieArr: [{
        name: '我的钱包',
        path: 'co_wallet',
        img: 'https://o6wndwjxn.qnssl.com/%E6%88%91%E7%9A%84%E9%92%B1%E5%8C%85@2x.png'
      }, {
        name: '优惠券',
        path: 'co_Coupon',
        img: 'https://o6wndwjxn.qnssl.com/%E4%BC%98%E6%83%A0%E5%88%B8@3x.png'
      }, {
        name: '购买记录',
        path: 'co_purchase',
        img: 'https://o6wndwjxn.qnssl.com/%E8%B4%AD%E4%B9%B0%E8%AE%B0%E5%BD%95@2x.png'
      }
      ],
      lieArrTwo: [
        // {
        //   name: '学习偏好',
        //   path: 'hobbytype',
        //   img: 'https://o6wndwjxn.qnssl.com/%E5%AD%A6%E4%B9%A0%E5%81%8F%E5%A5%BD.svg'
        // },

      ],
      lieArrThree: [ {
        name: '我的拼团',
        path: 'pintuanlist',
        img: 'https://o6wndwjxn.qnssl.com/%E6%88%91%E7%9A%84%E6%8B%BC%E5%9B%A2@3x.png'
      },
      {
        name: '课程评价',
        path: 'comment_list',
        img: 'https://o6wndwjxn.qnssl.com/%E8%AF%BE%E7%A8%8B%E8%AF%84%E4%BB%B7@2x.png'
      }, {
        name: '意见反馈',
        path: 'co_Feedback',
        img: 'https://o6wndwjxn.qnssl.com/%E6%84%8F%E8%A7%81%E5%8F%8D%E9%A6%88@2x.png'
      },
      {
        name: '关注老师',
        path: 'teacher_follow',
        img: 'https://o6wndwjxn.qnssl.com/%E5%85%B3%E6%B3%A8%E8%80%81%E5%B8%88@2x.png'
      },
      {
        name: '课程收藏',
        path: 'co_Collection',
        img: 'https://o6wndwjxn.qnssl.com/%E8%AF%BE%E7%A8%8B%E6%94%B6%E8%97%8F@3x.png'
      },
      {
        name: '课程足迹',
        path: 'footprint',
        img: 'https://o6wndwjxn.qnssl.com/%E8%AF%BE%E7%A8%8B%E8%B6%B3%E8%BF%B9@2x.png'
      },
      {
        name: '帮助中心',
        path: 'help/helps',
        img: 'https://o6wndwjxn.qnssl.com/%E5%B8%AE%E5%8A%A9%E4%B8%AD%E5%BF%83@2x.png'
      },
      {
        name: '在线客服',
        path: 'abs',
        img: 'https://o6wndwjxn.qnssl.com/%E5%9C%A8%E7%BA%BF%E5%AE%A2%E6%9C%8D@2x.png'
      }
      ]
      // {
      //   name: '成为讲师',
      //   path: 'teacherForm',
      //   img: 'https://o6wndwjxn.qnssl.com/yijianfankui.svg'
      // }
    }
  },
  created () {
    this.jiazai()
    this.getspellgroup()
    this.partyTime()
  },
  mounted () {
    this.WinHeight = document.documentElement.clientHeight
    // 获取浏览器可视区域高度
    this.clientHeight = `${document.documentElement.clientHeight}` // document.body.clientWidth;
    window.onresize = function temp () {
      this.clientHeight = `${document.documentElement.clientHeight}`
    }
  },
  watch: {
    clientHeight: function () {
      this.changeFixed(this.clientHeight)
    }
  },
  methods: {
    getspellgroup () {
      let prams = {
        app_id: this.app_id,
        member_id: this.user_id
      }
      spellgroup(prams).then(res => {
        this.$store.commit('updateLoadingStatus', { isLoading: false })
        let {
          code,
          data
        } = res.data
        if (code === 200) {
          this.arrdom = data
        }
      })
    },
    partyTime () {
      let obj = {
        member_id: this.user_id
      }
      part(obj).then(res => {
        if (res.data.code === 200) {
          this.status = res.data.data
          if (res.data.data == 0) {
            this.hahaha = true
          } else if (res.data.data == 1) {
            this.hahaha = true
          } else if (res.data.data == 2) {
            this.hahaha = true
          } else {
            this.hahaha = false
          }
        } else {
          this.hahaha = false
          this.$vux.alert.show({
            title: '提示',
            content: res.data.msg
          })
        }
      })
    },
    goVip () {
      this.$router.push({
        path: '/vip'
      })
    },
    onConfirm (msg) {
      console.log('on confirm')
      if (msg) {
        alert(msg)
      }
    },
    navpromot () {
      this.$router.push({
        path: '/promot'
      })
    },
    cen_user_click () {
      this.$router.push({
        path: '/modify'
      })
    },
    goOther (link) {
      if (link === 'abs') {
        this.shows = true
        return
      }
      if (link === 'teacherlook') {
        if (this.hahaha === true) {
          if (window.__wxjs_is_wkwebview !== true) {
            this.$router.push({
              path: `/teacherForm`
            })
          } else {
            window.location.href = `/teacherForm`
          }
        } else {
          this.$router.push({
            path: `/${link}`
          })
        }
      } else {
        this.$router.push({
          path: `/${link}`
        })
      }
    },
    changeFixed (clientHeight) { // 动态修改样式
      // console.log(clientHeight)
      // this.$refs.homePage.style.height = clientHeight + 'px'
    },
    jiazai () {
      let prams = {
        app_id: this.app_id,
        member_id: this.user_id
      }
      user_list(prams).then(res => {
        this.$store.commit('updateLoadingStatus', { isLoading: false })
        let {
          code,
          data
        } = res.data
        if (code === 200) {
          this.user = data
        }
      })
    }
  }
}
</script>

<style lang="less">
.quan{
   width: calc(100vw * 24 / 750);
  height: calc(100vw * 24 / 750);
  background-color: #FF0000;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  right: calc(100vw * 30 / 750);
  top: 50%;
  transform: translate(0,-50%);
}
.jiantouhuaang {
  width: calc(100vw * 13 / 750);
  height: calc(100vw * 23 / 750);
  margin-right: calc(100vw * 40 / 750);
  margin-left: calc(100vw * 8 / 750);
  margin-bottom: calc(100vw * 5 / 750);
}
.center {
  width: 100%;
  padding-bottom: 60px;
}

.userimg {
  width: calc(100vw * 130 / 750);
  height: calc(100vw * 130 / 750);
  border-radius: 50%;
  margin-left: calc(100vw * 20 / 750);
  margin-top: calc(100vw * 34 / 750);
  vertical-align: middle;
}

.username {
  vertical-align: middle;
  display: inline-block;
  line-height: calc(100vw * 120 / 750);
  margin-left: calc(100vw * 20 / 750);
  margin-top: calc(100vw * 34 / 750);
}

.username .name {
  font-family: PingFang-SC-Bold;
  font-size: 16px;
  color: #333;
}

.username .qianming {
  font-family: PingFang-SC-Bold;
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #ffffff;
}

.center_jaintou {
  width: calc(100vw * 17 / 750);
  height: calc(100vw * 17 / 750 * 34 / 17);
  vertical-align: middle;
  position: absolute;
  top: calc(100vw * 40 / 750 * 78 / 40);
  right: calc(100vw * 40 / 750);
}

.pc_top2_kaung {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: flex-start;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin-top: calc(100vw * 30 / 750);
}

.pc_top2 {
  display: inline-block;
  width: calc(100vw * 240 / 750);
  text-align: center;
}

.pc_top2_num {
  font-family: PingFang-SC-Bold;
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #ffffff;
  margin-bottom: calc(100vw * 18 / 750);
}

.pc_top2_wz {
  font-family: PingFang-SC-Bold;
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #ffffff;
}

.pc_top2_xian {
  display: inline-block;
  width: 1px;
  height: calc(100vw * 2 / 750 * 52 / 2);
  background-color: #ffffff;
}

.zhongjian {
  width: calc(100vw * 710 / 750);
  height: calc(100vw * 108 / 750);
  margin: calc(100vw * 30 / 750) auto;
  background-color: #ffffff;
  background: #f2dbbc;
  border-radius: calc(100vw * 12 / 750);
  padding-left: calc(100vw * 45 / 750);
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.zhongjainxian {
  display: inline-block;
  vertical-align: middle;
  width: 2px;
  height: calc(100vw * 2 / 750 * 116 / 2);
  background-color: #f0f0f0;
}

.right {
  display: inline-block;
  width: calc(100vw * 340 / 750);
  height: calc(100vw * 710 / 750 * 172 / 710);
  vertical-align: middle;
  text-align: center;
}
.tgzx_img {
  width: calc(100vw * 51 / 750);
  height: calc(100vw * 47 / 750);
  vertical-align: middle;
}

.tgzx {
  font-family: PingFang-SC-Bold;
  font-size: 15px;
  font-weight: bold;
  font-stretch: normal;
  line-height: calc(100vw * 188 / 750 * 90 / 188);
  letter-spacing: 0px;
}

.tgzx span {
  display: inline-block;
  color: #7b5d39;
}

.xxzq {
  font-family: PingFangSC-Regular;
  color: #7b5d39;
  font-family: PingFang-SC-Medium;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  flex: 1;
  text-align: right;
}

.nr {
  width: calc(100vw * 710 / 750);
  background-color: #ffffff;
  border-radius: 5px;
  margin: 0 auto;
}

.nr_tit {
  height: calc(100vw * 710 / 750 * 76 / 710);
  border-bottom: 1px solid #f0f0f0;
  font-family: PingFang-SC-Medium;
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  line-height: calc(100vw * 710 / 750 * 76 / 710);
  letter-spacing: 0px;
  color: #000000;
  padding-left: 13px;
}

.list {
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  background: #ffffff;
  box-shadow: 0 0 12px 0 rgba(153, 153, 153, 0.2);
  border-radius: 12px;
  border-radius: 12px;
  text-align: center;
  height: calc(100vw * 185 / 750);
}

.kuanggrzx {
  flex: 1;
  text-align: center;
}

.kuanggrzx_img {
  width: calc(100vw * 60 / 750);
  height: calc(100vw * 60 / 750);
  display: block;
  margin: 0 auto;
}

.kuanggrzx_wz {
  font-family: PingFangSC-Regular;
  font-size: 15px;
  color: #333333;
  flex: 1;
  text-align: left;
}
.kuanggrzx_wzs {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  margin-top: calc(100vw * 12 / 750);
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #333333;
  flex: 1;
  text-align: center;
}
.lianjie {
  display: inline-block;
}
.nr-two {
  margin-top: 14px;
}
.kuanggrzx-two {
  width: 100%;
  height: calc(100vw * 40 / 750);
  margin-bottom: calc(100vw * 48 / 750);
  display: flex;
  align-items: center;
  position: relative;
}
.kuanggrzx_img-two {
  width: calc(100vw * 40 / 750);
  height: calc(100vw * 40 / 750);
  margin-right: calc(100vw * 30 / 750);
  display: block;
}
.kuanggrzx_img-twor {
  width: calc(100vw * 13 / 750);
  height: calc(100vw * 23 / 750);
  display: block;
}
.cwjs {
  background: #ffffff;
  box-shadow: 0 0 12px 0 rgba(153, 153, 153, 0.2);
  border-radius: calc(100vw * 12 / 750);
  width: calc(100vw * 710 / 750);
  height: calc(100vw * 108 / 750);
  margin: 0 auto;
  text-align: center;
  color: #666;
  margin-bottom: calc(100vw * 64 / 750);
  line-height: calc(100vw * 108 / 750);
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  margin-top: calc(100vw * 40 / 750);
}
</style>
